<script setup>
import { ref } from 'vue'
import config from "./config";
 
const emit = defineEmits(['addNode']);

const show = ref(false);
const nodeConfig = config

function newNode(item, x, y) {
  let config = "";
  const time = new Date().getTime();
  switch (item.type) {
    case "output":
      config = {
        x: x,
        y: y,
        width: 180,
        height: 40,
        shape: "dag-node",
        data: item,
        ports: {
          groups: {
            left: {
              position: "left",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            right: {
              position: "right",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            top: {
              position: "top",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            bottom: {
              position: "bottom",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
          },
          items: [
            {
              id: `left-${time}`,
              group: "left",
            },
            {
              id: `right-${time}`,
              group: "right",
            },
            {
              id: `top-${time}`,
              group: "top",
            },
            {
              id: `bottom-${time}`,
              group: "bottom",
            },

          ],
        },
      };
      break;
    case "onlyIn":
      config = {
        x: x,
        y: y,
        width: 180,
        height: 40,
        shape: "dag-node",
        data: item,
        ports: {
          groups: {
            left: {
              position: "left",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            right: {
              position: "right",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            top: {
              position: "top",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            bottom: {
              position: "bottom",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
          },
          items: [
            {
              id: `left-${time}`,
              group: "left",
            },
            {
              id: `right-${time}`,
              group: "right",
            },
            {
              id: `top-${time}`,
              group: "top",
            },
            {
              id: `bottom-${time}`,
              group: "bottom",
            },

          ],
        },
      };
      break;
    case "algorithm":
      config = {
        x: x,
        y: y,
        width: 180,
        height: 40,
        shape: "dag-node",
        data: item,
        ports: {
          groups: {
            left: {
              position: "left",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            right: {
              position: "right",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            top: {
              position: "top",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
            bottom: {
              position: "bottom",
              attrs: {
                circle: {
                  r: 4,
                  magnet: true,
                  stroke: "#C2C8D5",
                  strokeWidth: 1,
                  fill: "#fff",
                },
              },
            },
          },
          items: [
            {
              id: `left-${time}`,
              group: "left",
            },
            {
              id: `right-${time}`,
              group: "right",
            },
            {
              id: `top-${time}`,
              group: "top",
            },
            {
              id: `bottom-${time}`,
              group: "bottom",
            },

          ],
        },
      };
      break;
  }
  return config;
}
function dragend(item, e) {
  emit("addNode", newNode(item, e.x - 280, e.y - 100));
}

</script>

<template>
  <div class="panel">
    <section @click.stop="">
        <p @click="show = !show">
          <img :class="{ arrow: show }" class="img" src="@/assets/arrow.svg" alt="" />
          系统组件
        </p>
        <div v-if="show" class="nodes">
          <div v-for="(item, index) in nodeConfig" :key="index"  draggable="true"
            @dragend="dragend(item, $event)" class="node">
            <span>
              <img :src="item.icon" alt="" />
            </span>
            <p>
              {{ item.label }}
            </p>
          </div>
        </div>
      </section>
  </div>
</template>

<style scoped> 
.panel {
   width: 15vw;
 }
 .img {
  width: 15px;
  height: 15px;
  margin:0
 }
 .nodes{
  display: inline-block;
  padding-left: 12px;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
 }
 .node{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border:none;
  margin:2px
 }
 .node  img {
  width: 30px;
  height: 30px;
  margin:0
 }
 .node p{
  margin: -2px 0 0;
  text-align: center;
  font-size: 12px;
  color: #939393;
 }
 .arrow {
  transform: rotate(90deg);
  transition-duration: 0.3s;
}
</style>
